<template>
  <div class="main-swiper">
    <!--<swiper class="swiper" :list="hotGoodsList" dots-position="center" :height="height"
            auto="auto" loop="loop">
      <swiper-item v-for="item in hotGoodsList" :key="item.picUrl">
        <img :src="item.picUrl" :alt="item.name">
      </swiper-item>
    </swiper>-->
    <!--<div class="swiper-container">
      <div class="swiper-wrapper" :list="hotGoodsList">
        <div class="swiper-slide" v-for="item in hotGoodsList" :key="item.picUrl">
          <img :src="item.picUrl" :alt="item.name">
        </div>

      </div>
    </div>-->

    <div class="home-swiper">
      <mt-swipe :auto="4000">
        <mt-swipe-item v-for="(item,index) in hotGoodsList" :key="index">
          <img :src="item.picUrl">
        </mt-swipe-item>
      </mt-swipe>
    </div>

    <!--<ul class="service-policy">
      <li class="policy-item">
        <span class="icon iconfont icon-wancheng"></span>
        <span class="text">自营品牌</span>
      </li>
      <li class="policy-item">
        <span class="icon iconfont icon-wancheng"></span>
        <span class="text">30天无忧退货</span>
      </li>
      <li class="policy-item">
        <span class="icon iconfont icon-wancheng"></span>
        <span class="text">48小时快速退款</span>
      </li>
    </ul>-->
  </div>
</template>

<script>
  // import {Swiper, SwiperItem} from "vux";
  import { FormPreview } from 'vux'
  // import Swiper from 'swiper';
  // import 'swiper/dist/css/swiper.css';
  export default {
    name: "HotSwiper",
    components: {},
    data() {
      return {
        height: "200px",
        screenWidth: document.body.clientWidth, // 屏幕尺寸
        // hotGoodsList: this.$store.state.hotGoodsList
      }

    },
    computed:{
      hotGoodsList() {
        return this.$store.state.hotGoodsList
      }
    }
  }
</script>

<style lang="stylus" scoped>
  .home-swiper
    height 6.5rem;
    margin-top 1px;
    img
      width 100%;
      height 6.5rem



</style>
